<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <form action="">
        <input type="text" name="username" placeholder="请输入用户名" id="username">
        <span id="usernameSpan"></span>
        <br>
        <input type="password" name="password" placeholder="请输入密码"> <br>
        <button>提交</button>
    </form>
    <!--  导入axios类库  -->
    <script type="text/javascript" src="js/axios-0.18.0.js"></script>
    <script type="text/javascript">
        /*
            说明：
                1.后台地址url："http://localhost:8080/registerServlet"
                2.后台需要根据key即参数名是username来获取前端提交的用户名数据
                3.后台已经存在的用户名是："岩岩"
         */
        document.getElementById("username").onblur = function () {
            let usernameVal = document.getElementById("username").value;
            if (usernameVal.trim() != "") {
                axios.get("http://localhost:8080/registerServlet?username=" + usernameVal)
                    .then(resp => {
                        let val = resp.data;
                        if (val) {
                            let uns = document.getElementById("usernameSpan");
                            uns.innerHTML = "√恭喜，该用户名可以注册";
                            uns.style.color = "green";
                        } else {
                            let uns = document.getElementById("usernameSpan");
                            uns.innerHTML = "×抱歉，该用户名已存在不可以注册";
                            uns.style.color = "red";
                        }
                    })
            }
        }


    </script>
</body>

</html>